<template>
    <div>
        <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="formRef">
                <el-form-item label="名称" :label-width="formLabelWidth" prop="label">
                    <el-input v-model="form.label" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="parentLable">
                    <el-popover placement="bottom-start" width="300" trigger="click" v-model="popoverVisible">
                        <div v-on:click="clearParentMue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无上级菜单</div>
                        <el-tree ref="tree" :data="tableData" :props="defaultProps" node-key="id" highlight-current
                            @current-change="selectParentMue">
                        </el-tree>
                        <el-input slot="reference" v-model="form.parentLable" readonly placeholder="请选择上级菜单"
                            suffix-icon="el-icon-arrow-down"></el-input>
                    </el-popover>
                </el-form-item>
                <el-form-item label="图标" :label-width="formLabelWidth">
                    <el-input v-model="form.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序号" :label-width="formLabelWidth" prop="order_num">
                    <el-input v-model.number="form.order_num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单URL" :label-width="formLabelWidth">
                    <el-input v-model="form.path" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="路径" :label-width="formLabelWidth">
                    <el-input v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMune()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/api.js';

export default {
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            popoverVisible: false,
            dialogFormVisible: false,
            rules: {
                label: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请输入路径', trigger: 'blur' }
                ],
                parentLable: [
                    { required: true, message: '请选择上级菜单', trigger: 'blur' }
                ],
                order_num: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { type: 'number', message: '请输入有效的数字', trigger: 'blur' }
                ]
            },
            tableData: [],
            form: {
                id: '',
                label: '',
                parent_id: '',
                parentLable: '',
                icon: '',
                order_num: '',
                path: '',
                url: '',
                sort: 'edit'
            },
            formLabelWidth: '120px'
        }

    },
    methods: {
        addMune() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    api.post('/sys/updateMune', this.form)
                        .then(response => {
                            this.dialogFormVisible = false;
                            if (response.data.integer < 1) {
                                this.$message({
                                    type: 'info',
                                    message: `编辑失败`
                                });
                            }
                            this.$emit('refresh');
                        })
                        .catch(error => {
                            alert('编辑失败!');
                        });
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            })
        },
        selectParentMue(data) {
            if (data) {
                this.form.parent_id = data.id;
                this.form.parentLable = data.label;
            }
        },
        clearParentMue() {
            this.form.parent_id = 0;
            this.form.parentLable = '无上级菜单';
        },
    }
}
</script>

<style lang="less"></style>